<template>
  <!-- 快乐会议 -->
  <div class="box">
     <div class="img_banner">
      <van-swipe :autoplay="3000" style="width:100%;height:100%">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
        >
          <img v-lazy="image.bander_img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="ranking clearfix">
       <span
        class="heard"
        v-if="Name.length<3"
      > {{((Name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
      <span
        class="heard"
        v-else-if="Name.length>=3"
      > {{((Name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
      <span
        class="rank_left"
        style="border-radius: 10%/50%;"
      ><span class="rank_img"><img src="@/static/img/rank_jin.png"></span><span style="display:inline-block;margin-top:4px">{{lists.Gold}}</span></span>
      <span
        class="rank_left"
        style="border-radius: 10%/50%;"
      ><span class="rank_img"><img src="@/static/img/rank_yin.png"></span><span style="display:inline-block;margin-top:4px">{{lists.Silver}}</span></span>
      <span
        class="rank_left"
        style="border-radius: 10%/50%;"
      ><span class="rank_img"><img src="@/static/img/rank_tong.png"></span><span style="display:inline-block;margin-top:4px">{{lists.Copper}}</span></span>
    </div>
    <div class="ranking_content clearfix">

        <van-row class="content_left" @click="showMettingDetails(item.id,item.number,item.create_date)"  v-for="(item ,i) in list"
        :key="i">
          <van-col span="6" style="text-align:left;"><img style="vertical-align:middle;margin-right:10px" src=""><span>第{{item.number}}届</span> </van-col>
          <van-col span="9">快乐会议</van-col>
          <van-col span="9">{{item.create_date}}</van-col>
        </van-row>
    </div>
  </div>
</template>

<script type="text/javascript">
import { Col, Row,Swipe ,SwipeItem} from "vant";
export default {
  data() {
    return {
      list: [],
      images: [
        {bander_img:''},
        {bander_img:""},
      ],
       lists:[],
       Name:''
    };
  },
  components: {
    [Col.name]: Col,
    [Row.name]: Row,
     [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  created() {
    this.getHapply();
    this.show_Rotation_chart()
    dd.biz.navigation.setTitle({
      title: "快乐会议" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
     async show_Rotation_chart(){
        let userId = localStorage.getItem("userId");
          let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/getRotationPicture?corpId=${corpId}&userId=${userId}&type=4`)
     if(res.data.data.length!=0){
          this.images = res.data.data;
      }
   },
    // 跳转详情页
    showMettingDetails(id,name,date){
      this.$router.push({  //核心语句
        path:'/mettingDetails',   //跳转的路径
        query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          id:id ,
          name: name,
          date:date 
        }
      })
    },
    async getHapply() {
       let userId = localStorage.getItem("userId");
         let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/happyList?corpId=${corpId}&userId=${userId}`
      );
      this.list = res.data.data;
      this.lists=res.data
      this.Name = this.lists.name
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding-bottom: 55px;
  .img_banner {
    height: 180px;
    width: 100%;
    // padding: 10px;
    margin-bottom: 10px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  span {
    display: inline-block;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .ranking {
    span {
      display: inline-block;
      font-size: 14px;
    }
    .heard {
      color: #fff;
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #5ec9f6;
      font-size: 16px;
      line-height: 50px;
    }
    .rank_left {
      width: 80px;
      border: 1px solid silver;
      .rank_img {
        margin-left: 5px;
        width: 20px;
        height: 25px;
        float: left;
      }
    }
  }
  .ranking_content {
    margin-top: 10px;
    .content_left {
      padding:5px 0px 5px 15px;
      border-top: 1px solid #ebedf0;
      font-size: 16px;
    }
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
